<template>
  <div class="app-container">
    <div class="openSearch" @click="container=!container">
      <span>搜索/筛选借款</span>
      <span :class="{opencolor:container}">[{{container?"隐藏":"展开"}}]</span>
    </div>
    <div class="filter-container" v-if="container">
      <el-row style="padding-bottom:10px;">
        <span>角色名称</span>
        <el-input
          @keyup.enter.native="handleFilter"
          style="width: 200px;"
          class="filter-item"
          size="mini"
          placeholder="角色名称"
          v-model="params['companyName']"
        ></el-input>
      </el-row>
      <el-row style="padding-top:10px">
        <el-button
          class="filter-item"
          type="primary"
          v-waves
          size="mini"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
      </el-row>
    </div>
    <el-table
      :data="list"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
    >
      <el-table-column prop="id" align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="merchantNo" align="center" label="商户编号" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.merchantNo}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="loginName" align="center" label="登录名" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.loginName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="状态" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.status | statusFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="companyName" align="center" label="企业名称" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.companyName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="companyAddress" align="center" label="企业地址" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.companyAddress}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="compnayLegal" align="center" label="企业法人" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.compnayLegal}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="accountType" align="center" label="账户类型" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.accountType}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="realName" align="center" label="真实姓名" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.realName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" align="center" label="手机号码" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.mobile}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="idCardNo" align="center" label="身份证号码" width="180">
        <template slot-scope="scope">
          <span>{{scope.row.idCardNo}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="contactUserName" align="center" label="紧急联系人" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.contactUserName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="contactMobile" align="center" label="紧急联系人电话" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.contactMobile}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="200"
        class-name="small-padding"
        fixed="right"
      >
        <template slot-scope="scope">
          <span
            type="primary"
            @click="editRow(scope.row)"
            style="color:#409eff;padding-right:20px"
          >修改</span>
          <span
            type="warning"
            @click="handleDelete(scope.row)"
            style="color:red;padding-right:20px"
          >删除</span>
          <!-- <span type="danger" @click="handleCheck(scope.row)" v-if="scope.row.status !== 5"  style="padding-right:20px">驳回</span>
          <span type="success" @click="handleCheck(scope.row)" v-if="scope.row.status !== 10" >通过</span>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <el-tabs type="border-card">
          <el-tab-pane label="基础信息">
            <el-form-item label="商户编号" prop="merchantNo">
              <span>{{temp.merchantNo}}</span>
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="登录名" prop="loginName">
                  <el-input v-model.trim="temp.loginName" type="text" placeholder="登录名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密码" prop="password">
                  <el-input v-model.trim="temp.password" type="password" placeholder="密码"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="企业名称" prop="companyName">
                  <el-input v-model.trim="temp.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业地址" prop="companyAddress">
                  <el-input v-model.trim="temp.companyAddress" type="email" placeholder="企业地址"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="企业法人" prop="compnayLegal">
                  <el-input v-model.trim="temp.compnayLegal" placeholder="企业法人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账户类型" prop="accountType">
                  <el-input v-model.trim="temp.accountType" placeholder="账户类型"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="真实姓名" prop="realName">
                  <el-input v-model.trim="temp.realName" placeholder="真实姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号码" prop="mobile">
                  <el-input v-model.trim="temp.mobile" placeholder="手机号码" ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证号码" prop="idCardNo">
                  <el-input
                    v-model.trim.number="temp.idCardNo"
                    placeholder="身份证号码"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="紧急联系人" prop="contactUserName">
                  <el-input
                    v-model.trim="temp.contactUserName"
                    placeholder="紧急联系人"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="紧急联系人电话" prop="contactMobile">
                  <el-input
                    v-model.trim="temp.contactMobile"
                    placeholder="紧急联系人电话"
                  ></el-input>
              </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="银行卡信息">
            <el-form-item label="银行名称" prop="bankName">
              <el-input v-model.trim="temp.bankVo.bankName" type="text" placeholder="登录名" style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="bankSubName">
              <el-input v-model.trim="temp.bankVo.bankSubName" type="password" placeholder="密码"  style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="企业名称" prop="bankNo">
              <el-input v-model.trim="temp.bankVo.bankNo" placeholder="企业名称"  style="width:300px;"></el-input>
            </el-form-item>
            <el-form-item label="是否默认银行卡" prop="defaultFlag">
              <el-radio-group v-model="temp.bankVo.defaultFlag">
                <el-radio label="0">否</el-radio>
                <el-radio label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" size="mini" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
var statusFilter = {
  1: "待审核",
  5: "驳回",
  10: "通过"
};
export default {
  data() {
    return {
      container: false,
      total: 0,
      params: {
        pageNo: 1,
        pageSize: 20
      },
      cmsList: [],
      list: [],
      permissionsList: [],
      temp: {
        bankVo: {
          bankName: ""
        }
      },
      rules: {
        roleName: [
          {
            required: true,
            message: "角色名称",
            trigger: "change",
            max: 50
          }
        ]
      }
    };
  },
  created() {
    this.loadData();
  },
  filters: {
    statusFilter(item) {
      return statusFilter[item];
    }
  },
  methods: {
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.loadData();
    },
    handleCurrentChange(page) {
      this.params.pageNo = page;
      this.loadData();
    },
    handleFilter() {
      this.loadData();
    },
    handleCheck(row) {
      let status = "";
      if (row.status === 5) {
        status = 10;
      } else {
        status = 5;
      }
      this.$post("/admin/capital_merchant/check", {
        id: row.id,
        checkStatus: status
      }).then(data => {
        this.loadData();
      });
    },
    handleDelete(row) {
      this.$confirm("确定删除该角色吗?", "提示").then(_ => {
        this.$post("/admin/capital_merchant/delete", {
          id: row.id
        }).then(data => {
          this.loadData();
        });
      });
    },
    addRow() {
      this.dialogFormVisible = true;
      this.isEditing = false;
      this.temp = {};
    },
    editRow(row) {
      this.dialogFormVisible = true;
      this.isEditing = true;
      this.$post("/admin/capital_merchant/detail", { id: row.id })
        .then(data => {
          this.temp = Object.assign({}, data);
        });
    },
    loadData() {
      this.$post("/admin/capital_merchant/list", this.params)
        .then(data => {
          this.list = data.dataList;
          this.total = data.total;
        })
        .catch(_ => {
          console.log("Err", _);
        });
    },
    submitFormAction() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.submiting = true;
          const tempData = Object.assign({}, this.temp);
          let url = "/admin/cms_article/add ";
          if (this.isEditing) {
            url = "/admin/manager/role/modify";
          }
          this.$post(url, tempData)
            .then(data => {
              this.loadData();
              this.$$notify("操作成功");
              this.dialogFormVisible = false;
            })
            .finally(_ => {
              this.submiting = false;
            });
        }
      });
    }
  }
};
</script>
<style>
.el-table td,
.el-table th {
  padding: 1px 0;
}
.el-table {
  font-size: 12px;
}
.opencolor {
  color: red;
}
.openSearch {
  margin-bottom: 10px;
  padding-bottom: 5px;
}
</style>